<template>
  <view class="content">
    <uni-nav-bar
      title="个人信息"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    >
      <view class="uni-nav-bar-l-icon" slot="left">
        <view class="uni-nav-bar-l-icon-left icon">
          <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
        </view>
      </view>
    </uni-nav-bar>

    <view class="user_logo">
      <button
        class="avatar-wrapper"
        open-type="chooseAvatar"
        @chooseavatar="onChooseAvatar"
      >
        <image class="avatar" :src="avatarUrl"></image>

        <view class="change-btn">
          <view class="icon">
            <image :src="$img('/static/img2/cc144.png')" lazy-load></image>
          </view>

          更换头像
        </view>
      </button>
    </view>

    <view class="row">
      <view class="row-title">昵称:</view>

      <view class="right">
        <input
          type="nickname"
          v-model="nickname"
          placeholder="请输入您的昵称"
          @blur="getnickname"
        />
      </view>
    </view>

    <view class="row">
      <view class="row-title">ID:</view>

      <view class="right">
        <input disabled :value="id" />
      </view>
    </view>

    <view
      class="btn_b c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc78.png')})`
      }"
      @click="setdata()"
    >
      确认修改
    </view>

    <!-- <view class="row">
      <view class="row-title">手机号:</view>

      <view class="right">
        <input
          :value="nickname"
          placeholder="请输入您的昵称"
          @blur="getnickname"
        />
      </view>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      avatarUrl: uni.getStorageSync('userinfo').headimg,
      nickname: uni.getStorageSync('userinfo').nickname,
      headimg_status: false,
      id: uni.getStorageSync('userinfo').ID
    }
  },
  onLoad() {},
  methods: {
    back() {
      uni.navigateBack()
    },
    getnickname(e) {
      this.nickname = e.detail.value
      console.log(e, this.nickname)
    },

    onChooseAvatar(e) {
      console.log(e)
      this.avatarUrl = e.detail.avatarUrl
      this.headimg_status = true
    },
    setdata() {
      let that = this
      if (this.headimg_status) {
        uni.uploadFile({
          url: that.siteBaseUrl + 'picture',
          filePath: that.avatarUrl,
          name: 'file',
          success(e) {
            let res = JSON.parse(e.data)
            if (res.status == 1) {
              that.req({
                url: 'update_userinfo',
                data: {
                  nickname: that.nickname,
                  headimg: res.data.path
                },
                success(ress) {
                  if (ress.status == 1) {
                    uni.showToast({
                      title: '修改成功',
                      icon: 'success',
                      success() {
                        setTimeout(() => {
                          that.$c.back()
                        }, 500)
                      }
                    })
                  }
                }
              })
            }
          }
        })
      } else {
        that.req({
          url: 'update_userinfo',
          data: {
            nickname: that.nickname,
            headimg: that.avatarUrl
          },
          success(ress) {
            if (ress.status == 1) {
              uni.showToast({
                title: '修改成功',
                icon: 'success',
                success() {
                  setTimeout(() => {
                    uni.redirectTo({
                      url: './index'
                    })
                  }, 1000)
                }
              })
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  color: #fff;
  .head {
    position: fixed;
    top: 0;
    z-index: 20;

    .header_title {
      height: 70rpx;
      line-height: 70rpx;
      width: 100%;
      box-sizing: border-box;
      font-weight: bold;
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      box-sizing: border-box;

      > view:nth-of-type(1) {
        display: flex;
        align-items: center;
      }

      > view:nth-of-type(2) {
        width: 520rpx;
        text-align: center;
        /* margin: auto; */
      }

      image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
}

.user_logo {
  /* background-color: #000000; */
  padding: 80rpx 0 60rpx 0;
  text-align: center;

  .change-btn {
    width: 130rpx;
    height: 44rpx;
    background: #38090c;
    border-radius: 336rpx 336rpx 336rpx 336rpx;
    border: 1rpx solid #e40d1d;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    z-index: 1;
    pointer-events: none;

    .icon {
      width: 24rpx;
      height: 24rpx;
    }

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 20rpx;
    color: #ffffff;
  }
}

button::after {
  border: none;
}

button {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  line-height: inherit;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160rpx;
  height: 160rpx;
}

.user_logo > .avatar-wrapper {
  width: 170rpx;
  height: 170rpx;
  border: 2rpx solid #e40d1d;
  margin: auto;
  border-radius: 128rpx;
  overflow: visible;
  // border: 1px solid #fff;
  position: relative;
}

.user_logo > .avatar-wrapper > image {
  width: 100%;
  height: 100%;
  border-radius: 160rpx;
  overflow: hidden;
}

.user_logo > .camera {
  width: 30rpx;
  height: 26rpx;
  position: relative;
  bottom: 40rpx;
  left: 50rpx;
}

.user_logo > view:nth-of-type(1) {
  font-size: 25rpx;
  font-weight: 400;
  color: #ffffff;
}

.user_logo > view:nth-of-type(3) {
  font-size: 22rpx;
  font-weight: 400;
  color: #ffffff;
  margin-top: 20rpx;
}

.nicheng_tit {
  font-size: 32rpx;
  font-weight: 400;
  color: #999999;
  padding: 0 36rpx;
  margin-top: 70rpx;
}

.nicheng_ipt {
  width: 690rpx;
  height: 88rpx;
  background: #333333;
  border: 1px solid #333333;
  border-radius: 10rpx;
  margin: 0 auto;
  padding: 0 36rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  font-weight: 400;
  color: #fff;
  border-radius: 9rpx;
  margin-top: 22rpx;
}

.btn_b {
  width: 695rpx;
  height: 94rpx;
  margin: 0 auto;
  margin-top: 140rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  font-family: 光良酒-干杯体, 光良酒-干杯体;
  font-weight: 400;
  font-size: 32rpx;
  color: #ffffff;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
}

.row {
  margin: 30rpx auto 0;
  display: flex;
  align-items: center;
  width: 690rpx;
  height: 100rpx;
  background: #252525;
  border: 2rpx solid #444444;
  box-sizing: border-box;
  padding: 0 30rpx;

  .row-title {
    width: 120rpx;

    font-size: 32rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }

  .right {
    flex: 1;

    input {
      flex: 1;
      text-align: right;

      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
</style>
